<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="地址" name="directly">
        <el-input v-model="address" placeholder="请输入下载地址" style="width:400px;max-width:100%;" />
        <el-button class="set-button" type="success">
          确定
        </el-button>
        <el-button type="primary" icon="el-icon-document" @click="handleCopy(address,$event)">
          copy
        </el-button>
      </el-tab-pane>
      <el-tab-pane label="客服" name="v-directive">
        <el-input v-model="customer" placeholder="请输入客服号" style="width:400px;max-width:100%;" />
        <el-button class="set-button" type="success">
          确定
        </el-button>
        <el-button type="primary" icon="el-icon-document" @click="handleCopy(customer,$event)">
          copy
        </el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import clip from '@/utils/clipboard' // use clipboard directly

export default {
  data() {
    return {
      activeName: 'directly',
      address:'',
      customer: '1111'
    }
  },
  methods: {
    handleCopy(text, event) {
      clip(text, event)
    }
  }
}
</script>

<style scoped>
  .set-button{
    margin-left: 10px;
  }
</style>
